
.list_box {
    width: 100%;
    height: 100%;
    padding: 5px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    :global {
        ul {
            flex: 1;
            width: 100%;
            list-style: none;
            overflow-y: auto;
            margin-bottom: 0;

            li {
                width: 100%;
                height: 34px;
                // background: rgba(14, 95, 255, 0.2);
                background-blend-mode: normal;
                mix-blend-mode: normal;
                padding: 2px;
                line-height: 34px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 5px;
                cursor: pointer;

                span {
                    display: inline-block;
                    height: 20px;
                    line-height: 20px;
                    // flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .key {
                    display: inline-block;
                    width: 50px;
                    height: 20px;
                    text-align: center;
                }

                .icon {
                    display: inline-block;
                    width: 20px;
                    height: 20px;

                    img {
                        width: 100%;
                    }
                }



                .code {

                    mix-blend-mode: normal;
                    color: rgba(255, 255, 255, 1);
                    font-weight: 400;
                    flex: 1;
                }

                .name {
                    mix-blend-mode: normal;
                    color: rgba(255, 255, 255, 1);
                    font-weight: 400;
                    flex: 1;
                }

                .state {
                    mix-blend-mode: normal;
                    // color: rgba(255, 255, 255, 1);
                    color: rgba(102, 255, 255, 1);
                    font-weight: 400;
                }

                &:hover {
                    background: rgba(14, 94, 255, 0.26);
                }
            }

            .li:nth-child(2n) {


                .state {
                    color: rgba(10, 219, 139, 1);
                }
            }

            .li:hover {}
        }
    }
}